在 JavaScript 中,Object是我們很常拿來使用的資料結構。
無論您是初學者還是資深開發者,了解 Object
提供的方法都蠻幫助你在程式碼上寫的更乾淨。讓我們來詳細探討 Object
的各種方法,並為每一個提供實際的代碼示例。
Object.entries() 方法返回一個給定對象自身可列舉屬性的
key-value
陣列。
Object.values() 方法返回一個給定對象自身可列舉屬性的value
陣列陣列。
Object.keys 方法返回一個給定對象自身可列舉屬性的key
陣列。
const a = {b:1,c:2,d:3}
console.log(Object.keys(a))
console.log(Object.values(a))
console.log(Object.entries(a))
output: ['b', 'c', 'd'] [1, 2, 3] [['b', 1],['c', 2],['d', 3]]
Object.fromEntries() 方法是 Object.entries() 的反向操作,從鍵值對數組創建對象。
const entries = [['name', 'John'], ['age', 30]];
const obj = Object.fromEntries(entries);
console.log(obj);
output:{ name: 'John', age: 30 }
Object.assign()
方法用於將所有可列舉屬性的值從一個或多個Object覆制到目標Object。
它將返回目標對象。
const target = { a: 1 };
const source1 = { b: 2 };
const source2 = { c: 3 };
Object.assign(target, source1, source2);
console.log(target);//{ a: 1, b: 2, c: 3 }
Object.defineProperties() 和 Object.defineProperty()
這兩個方法允許精確地添加或修改對象上的屬性。defineProperties 可以同時定義多個屬性。
Object.defineProperties(obj, {
'property1': {
value: true,
writable: true
},
'property2': {
value: 'Hello',
writable: false
}
});
Object.defineProperty(obj, 'property3', {
value: 'I am property3',
writable: true
});
console.log(obj.property2);// 'Hello'
Object.freeze() 方法凍結一個對象,使其不再能添加、刪除或修改屬性。
const frozenObj = Object.freeze({ prop: 42 });
frozenObj.prop = 33;
output:42
Object.getOwnPropertyDescriptor() 和 Object.getOwnPropertyDescriptors()
這兩個方法用於獲取對象屬性的描述符。前者用於獲取單個屬性的描述符,後者可以獲取對象上所有自有屬性的描述符。
const obj = { prop: 42 };
const descriptor = Object.getOwnPropertyDescriptor(obj, 'prop');
console.log(descriptor.value); // 42
console.log(descriptor.writable); // true
const descriptors = Object.getOwnPropertyDescriptors(obj);
console.log(descriptors.prop.value); // 42
Object.getOwnPropertyNames() 和 Object.getOwnPropertySymbols()
這兩個方法返回一個陣列,分別包含物件上所有自有的屬性名和符號。
const obj = { a: 1, [Symbol('b')]: 2 };
console.log(Object.getOwnPropertyNames(obj)); // ['a']
console.log(Object.getOwnPropertySymbols(obj)); // [Symbol(b)]